<!-- Creating custom components -->
<!-- 💯 Runtime validation with PropTypes -->
<!-- http://localhost:3000/isolated/final/04.extra-3.html -->

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    const PropTypes = {
      string(props, propName, componentName) {
        if (typeof props[propName] !== 'string') {
          return new Error(
            `Hey, the component ${componentName} needs the prop ${propName} to be a string, but a ${typeof props[
              propName
            ]} was passed`,
          )
        }
      },
    }

    function Message({subject, greeting}) {
      return (
        <div className="message">
          {greeting}, {subject}
        </div>
      )
    }

    Message.propTypes = {
      subject: PropTypes.string,
      greeting: PropTypes.string,
    }

    const element = (
      <div className="container">
        <Message subject="World" greeting="Hello" />
        <Message subject="World" greeting="Goodbye" />
      </div>
    )

    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>
